<template>
    <div>
        <search v-on:getQueryKeyword="catchQueryKeyword"></search>
        <div class="filtrateTab border-bottom-1px">
            <div class="filtrate-tab-item" v-for="(item, index) in tabParams" @click="showDrop(index,true)"
                 v-bind:class="{'active':isAcitve==index}">
                <span>{{item}}<i class="mint-cell-allow-donw"></i></span>
            </div>
        </div>
        <div class="drop" v-show="dropShow">
            <div class="mask-black" @click="showDrop(null,false)"></div>
            <ul>
                <li v-for="(item, index) in showDrorams" class="dropitem border-bottom-1px"
                    v-bind:class="{'active':filterKey[isAcitve] === item}" @click="filtrate(item,index)">{{item}}
                </li>
            </ul>
        </div>

        <div class="catlist-wrapper">
            <div class="loading-container" v-show="!proList.length">
                <loading :desc="loadingDesc" :showimg="loadingShowimg"></loading>
            </div>

            <!-- content -->
            <div class="parts-list list-wrapper-hook" ref="partsw">
                <div>
                    <!-- 列表 -->
                    <div class="page-cell">
                        <a :href="'./catdetails.html?ptype=catIndustrialDetail&id=' + item.id"
                           class="border-bottom-1px mint-cell" v-if="proList.length"
                           v-for="item in proList">
                            <span class="mint-cell-mask"></span>
                            <div class="mint-cell-con">
                                <img @load="loadImage" v-lazy="item.photo" class="part-img">
                                <span class="mint-cell-text">
                                <strong>产品类型：{{item.productCategory}}</strong>
                                <span>排放等级：{{item.emissionLevels}}</span>
                                <span>发动机排量：{{item.engineEmission}}</span>
                                <span>功率标定：{{item.powerCalibration}}</span>
                                <span>机型：{{item.machineModel}}</span>
                         </span>
                            </div>
                        </a>
                    </div>
                    <!--
                      1、底部提示信息
                      2、这里有一种情况,就是没有更多数据时,这里的文本应该显示"暂无更多数据"
                    -->
                    <div class="bottom-tip" v-show="proList.length">
                        <span class="loading-hook">{{bottomTip}}</span>
                    </div>
                </div>
            </div>
            <!-- content end  -->
        </div>

    </div>
</template>
<script type="text/ecmascript-6">
    import Search from 'components/search/search';
    import Loading from 'components/loading/loading';
    import BScroll from 'better-scroll';
    import apiUrl from '../../../config/api';
    import basejs from 'common/js/base.js';
    import axios from 'axios';

    var tempArr = ['排放等级', '发动机排量', '功率标定'];
    export default {
        data() {
            return {
                getDropParams: {},
                loadingDesc: '正在载入...',
                loadingShowimg: true,
                filterKey: ["", "", "", ""],
                topTip: '下拉刷新',
                bottomTip: '查看更多',
                pageSize: 10,
                pageIndex: 1,
                pageCount: 0,
                proList: [], // 展现数据
                isAcitve: null,
                tabParams: ['排放等级', '发动机排量', '功率标定'],
                showDrorams: [],
                dropShow: false
            }
        },
        created() {
            document.title = "Industrial工业动力";
            this._getdata();
            this.$nextTick(() => {
                this._initScroll();
            })
        },
        methods: {
            catchQueryKeyword(queryKeyword) {
                this.filterKey = ['','',''];
                    this.tabParams = ['排放等级', '发动机排量', '功率标定'];
                if(queryKeyword!=='') {
                    axios({
                        method:'get',
                        url: apiUrl.catIndustrial + '?model=' + queryKeyword
                    }).then(response => {
                        if (response.data.code === 'SUCCESS') {
                            this.proList = [];
                            if(response.data.data.list.length > 0){
                                this.photourl(response.data.data.list);
                            this.pageCount = Math.ceil(response.data.data.count / this.pageSize);            
                                for (var i = 0; i < response.data.data.list.length; i++) {
                                    this.proList.push(response.data.data.list[i]);
                                }
                            } else {
                                this.loadingDesc = '没有查询到任何数据！';
                                this.loadingShowimg = false;
                            }
                        }
                    });
                } else {
                    
                    this._getdata();
                }
            },
            photourl(argument) {
                let resdata = argument;
                for (var i = resdata.length - 1; i >= 0; i--) {
                    let photo = resdata[i].photo;
                    photo = photo.split("|");
                    resdata[i].photo = photo[1]
                }
                return resdata;
            },
            _initScroll() {
                this.PartListScroll = new BScroll(this.$refs.partsw, {
                    click: true
                });
                var _this = this;
                this.PartListScroll.on('touchend', function (position) {
                    if (position.y < (this.maxScrollY - 30)) {
                        _this.bottomTip = '加载中...';
                        setTimeout(function () {
                            if (_this.pageCount >= _this.pageIndex) {
                                _this.bottomTip = '查看更多';
                                _this.pageIndex += 1;
                                _this._getdata();
                                // 加载更多后,重新计算滚动区域高度
                                _this.PartListScroll.refresh();
                            }
                            _this.bottomTip = '暂无更多数据';
                        }, 1000);
                    } else {
                        _this.bottomTip = '查看更多';
                    }
                });
            },
            _getdata() {
                axios({
                    method: 'get',
                    url: apiUrl.catIndustrial + '?emissionLevels=' + this.filterKey[0] + '&engineEmission=' + this.filterKey[1] + '&powerCalibration=' + this.filterKey[2] + '&pageNo=' + this.pageIndex + '&pageSize=' + this.pageSize
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        if (response.data.data.list.length > 0) {
                            this.photourl(response.data.data.list)
                            this.pageCount = Math.ceil(response.data.data.count / this.pageSize);
                            if (response.data.data.count < this.pageSize) {
                                this.bottomTip = '暂无更多数据';
                            }
                            for (var i = 0; i < response.data.data.list.length; i++) {
                                this.proList.push(response.data.data.list[i]);
                            }
                        } else {
                            this.loadingDesc = '该栏目下没有数据！';
                            this.loadingShowimg = false;
                        }
                        this._getField();
                    }
                });
            },
            _getField() {
                axios({
                    method:'get',
                    url: apiUrl.catIndustrialField + '?emissionLevels=' + this.filterKey[0] + '&engineEmission=' + this.filterKey[1] + '&powerCalibration=' + this.filterKey[2]
                }).then(response => {
                    response.data.data.emission_levels.push('重新筛选');
                    response.data.data.engine_emission.push('重新筛选');
                    response.data.data.power_calibration.push('重新筛选');
                    this.getDropParams = response.data.data;
                })
            },
            filtrate(item) {
                if(item !== '重新筛选') {
                    this.filterKey[this.isAcitve] = item;
                    this.tabParams[this.isAcitve] = item;
                } else {
                    this.filterKey[this.isAcitve] = '';
                    this.tabParams[this.isAcitve] = tempArr[this.isAcitve];
                }
                this.proList = [];
                this.pageIndex = 1;
                this._getdata();
                this.dropShow = false;
                this.isAcitve = null;
            },
            showDrop(index, isshow) {
                this.showDrorams = [];
                if(index === 0) {
                    for (var ele in this.getDropParams.emission_levels) {
                        this.showDrorams.push(this.getDropParams.emission_levels[ele]);
                    }
                }
                if(index === 1) {
                    for (var ele in this.getDropParams.engine_emission) {
                        this.showDrorams.push(this.getDropParams.engine_emission[ele]);
                    }
                }
                if(index === 2) {
                    for (var ele in this.getDropParams.power_calibration) {
                        this.showDrorams.push(this.getDropParams.power_calibration[ele]);
                    }
                }
                this.dropShow = isshow;
                this.isAcitve = index;
            },
            loadImage() {
                this.PartListScroll.refresh();
            }
        },
        components: {
            Loading,
            Search
        },
    }
</script>




